import Notice from '@/components/Notice.vue';
import Vue from 'vue';

// 给 Notice添加一个创建组件实例的方法，可以动态编译自身模板并挂载

Notice.getInstance = props => {
  //创建一个Vue实例，一个独立全新
  const instance = new Vue({
    render(h){// h简称: createElement，渲染函数
      //渲染函数： 用于渲染指定模板为虚拟dom
      //
      return h(Notice, {props})
    }
  }).$mount(); 
  //执行挂载，若不知道选择器，则模板将被渲染为文档之外的元素

  //不可以$mount('body'),$mount最终执行的方式是： outerHtml
  //最终会覆盖那个标签，当然不能 替换 body

  //必须使用原生的dom api把他插入文档中

  // $mount挂载完成以后，返回的instance 还是是vue实例，不是dom
  // vue实例是内容的管理对象，是个容器，包含虚拟dom 与 真正的 dom
  // $el 即暴露出的真正的dom，指的是渲染的Notice.vue中真实的dom
  document.body.appendChild(instance.$el)

  //也可以在html里新增个div，挂载到这个div上

  //获取Notice实例
  // $children指的是当前Vue实例中包含的所有组件实例 的数组
  const notice = instance.$children[0];
  return notice;
}

//设计单例模式，在全局范围唯一的 创建一个Notice实例
let msgInstance = null;
function getInstance() {
  // 只获取一个 全局 创建 Notice.getInstance实例

  msgInstance = msgInstance || Notice.getInstance();
  return msgInstance;
}
//在任何页面调用它，都用一个 去 复用
//节约资源，不内存泄漏

export default {
  info({duration=2,content=''}){
    getInstance().add({
      duration,
      content
    })
  }
}